Swift 程式雖然強大，但真正讓畫面「活起來」的關鍵，是和使用者互動的能力。昨天我們打好了 App 的架構基礎，今天，我們就要親手為這個架構注入靈魂！

我們將學習 iOS 開發中最重要的兩條「連接線」：

• IBOutlet：像一條數據線，讓程式碼能控制畫面元件，例如改變標籤文字。
• IBAction：像一條信號線，讓畫面元件的操作（如點擊按鈕）能觸發程式碼中的特定功能。

準備好見證你的程式碼第一次「指揮」畫面的神奇時刻了嗎？

今日學習重點

• 認識畫面連接器：了解 IBOutlet（屬性連線）與 IBAction（動作連線） 的用途與差異
• 在 Xib 中建立 UI：學會從元件庫拖曳 UILabel 與 UIButton 到畫面上
• 實作畫面綁定：掌握使用「Control + 拖曳」將 UI 元件與程式碼連接的技巧
• 完成第一個互動 App：透過點擊按鈕來改變標籤文字，驗證學習成果

實作：點擊按鈕，改變文字！

接續昨天的專案，今天我們將建立一個包含 Label 和 Button 的簡單畫面，並讓使用者點擊按鈕後，改變 Label 的顯示文字。

步驟 1：建立 UI 元件

進入 MainViewController.xib 檔案（這是我們的介面設計檔），點擊上方 ＋ 號，會跳出元件庫：

從元件庫中，拖曳一個 Label 和一個 Button 到畫面上：

小提醒：Label 的寬度記得拉長，避免文字被截斷哦！

將它們大致排列好後，開啟右側設定欄，設定 Label 的初始文字，例如 Hello!：

步驟 2：建立 IBOutlet（變數連線）

現在，我們來建立 IBOutlet，讓程式碼能夠控制這個 Label。
在畫面上方可以看到小小的工具列 點擊右上方的「Add Editor on Right」按鈕（圖示是兩個並排的長方形），來開啟並排編輯畫面。

接著在左側檔案管理開啟 MainViewController.swift 檔案，讓它與 MainViewController.xib 並排顯示：

按住 Control 鍵，從 MainViewController.xib 中的元件管理區將 Label 元件拖曳到 MainViewController.swift。

在彈出的視窗中，選擇連線方式為 Outlet，並將名稱命名為 lbMessage：

點擊 Connect，Xcode 會自動在你的程式碼中生成以下程式碼：

@IBOutlet weak var lbMessage: UILabel!

為什麼是 UILabel! 而不是 UILabel 或 UILabel?

妳會發現 Xcode 自動生成的 IBOutlet 都是一個驚嘆號 ! 結尾的隱式解析可選型別。

這是因為，當 MainViewController 被建立的瞬間，lbMessage 這個屬性其實還沒有跟畫面上的元件連上，所以它在技術上是 nil。但我們（以及 Xcode）可以保證，在畫面載入完成後 (viewDidLoad)，這個連線一定會被建立好。

因此，為了方便起見，我們使用 ! 來告訴編譯器：「相信我，在我使用它的時候，它絕對有值！」這也是 ! 在 iOS 開發中最常見、也最合理的用法。

接著用相同方法，建立 Button 的 IBOutlet，命名為 btnEnter：

@IBOutlet weak var btnEnter: UIButton!

步驟 3：建立 IBAction（事件觸發）

接著，我們要讓點擊按鈕時執行某些動作。

同樣按住 Control 鍵，從 MainViewController.xib 上的 Button 元件拖曳到 MainViewController.swift：

在彈出的視窗中，選擇連線方式為 Action，並將名稱命名為 didTapButton：

點擊 Connect，Xcode 會自動生成以下程式碼：

@IBAction func didTapButton(_ sender: Any) {
}

接著再 didTapButton 方法中，撰寫修改標籤文字的程式碼，整個看起來會像這樣：

@IBAction func didTapButton(_ sender: Any) {
    lbMessage.text = "Hello, World!"
}

步驟 4：測試！

點選 Xcode 上方 ▶️ Run 按鈕（或 Cmd + R），在模擬器中執行。
初始畫面會顯示你設定的 Hello!：

點擊按鈕後，文字會變成 Hello, World!：

小結一下

恭喜！今天，你的 App 第一次「活」了過來！

我們完成了一項極其重要的實作：學會了如何在 Xcode 中，將視覺化的介面元件與程式碼邏輯緊密地綁定在一起。你現在理解了 IBOutlet 如同一條數據線，讓程式碼得以控制畫面；而 IBAction 則像一條信號線，讓使用者的操作得以觸發程式。

這個「畫面 → 程式 → 畫面」的互動循環，是所有 iOS App 開發的核心基礎。掌握了它，你就真正踏上了 UI 開發的康莊大道！

🌟 明天預告

今天我們成功讓按鈕和標籤動了起來，但在不同尺寸的 iPhone 上看看——它們的位置是不是亂掉了？

這個「跑版」問題是所有 UI 開發者都必須面對的挑戰。明天，我們將正式學習 iOS 中的排版神技 —— Auto Layout（自動佈局）！你將學會如何為元件添加 約束（Constraints），讓你的 App 介面能優雅地自動適應任何螢幕尺寸！

敬請期待《Day 18｜介面佈局大解密：用 Auto Layout 讓 App 畫面自動適應！》